<template>
  <view class="page">
    <Header :title="'抗遗忘复习'"></Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="tabs">
            <reviewTabs :current="1"></reviewTabs>
          </view>
          <view class="box">
            <view class="top">
              <view class="image">
                <image :src="chapterData.bookImg" mode="widthFix" />
              </view>
              <view class="info">
                <view class="progress">
                  <view class="progress_content">
                    <u-circle-progress
                      active-color="#fff"
                      :percent="correctPercent"
                      width="284"
                      border-width="20"
                      bg-color="rgba(0,0,0,0)"
                      inactive-color="rgba(0,0,0,0)"
                    >
                      <view class="progress_box">
                        <view>{{ correctPercent }}%</view>
                        <text>复习正确率</text>
                      </view>
                    </u-circle-progress>
                  </view>
                  <view class="progress_content">
                    <u-circle-progress
                      active-color="#fff"
                      :percent="errorPercent"
                      width="284"
                      border-width="20"
                      bg-color="rgba(0,0,0,0)"
                      inactive-color="rgba(0,0,0,0)"
                    >
                      <view class="progress_box">
                        <view>{{ errorPercent }}%</view>
                        <text>复习遗忘率</text>
                      </view>
                    </u-circle-progress>
                  </view>
                </view>
                <view class="username"> 姓名：{{ userInfo.userName }} </view>
                <view class="num">
                  <view class="num_content">
                    <view class="num_title"> {{ correctNum }}个 </view>
                    <view class="num_text"> 正确数 </view>
                  </view>
                  <view class="num_content">
                    <view class="num_title"> {{ reviewNum }}个 </view>
                    <view class="num_text"> 已复习 </view>
                  </view>
                  <view class="num_content">
                    <view class="num_title"> {{ errorNum }}个 </view>
                    <view class="num_text"> 遗忘数 </view>
                  </view>
                </view>
              </view>
              <view
                class="btn"
                @click="
                  switchPage(
                    `/pages/review/review2Detail?chapterId=${chapterData.chapterId}`
                  )
                "
              >
                <text>查看详情</text>
                <image
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/review/icon_detail.png"
                  mode="scaleToFill"
                />
              </view>
            </view>
            <view class="bottom">
              <view class="table">
                <view class="table_header">
                  <text>本次遗忘记录</text>
                  <view
                    class="table_btn"
                    @click="
                      switchPage(
                        `/pages/review/review2List?chapterId=${chapterData.chapterId}`
                      )
                    "
                  >
                    <text>点我学新</text>
                  </view>
                </view>
                <view class="table_content">
                  <view class="table_box">
                    <u-table
                      font-size="24"
                      color="#2ba9e8"
                      padding="20rpx 0"
                      border-color="#CACACA"
                      bg-color="#e0f0fa"
                    >
                      <u-tr>
                        <u-th width="50%">单词</u-th>
                        <u-th width="50%">释义</u-th>
                      </u-tr>
                      <u-tr v-for="(item, index) in ywWords" :key="index">
                        <u-td width="50%">{{ item.word }}</u-td>
                        <u-td width="50%">{{ item.wordParaphrase }}</u-td>
                      </u-tr>
                    </u-table>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getStore } from "@/libs/storage";
import { getLtsIndex } from "@/api/sync";
import reviewTabs from "./reviewTabs";

export default {
  components: { reviewTabs },
  data() {
    return {
      chapterId: "",
      type: "",
      chapterData: {},
      correctNum: "0",
      errorNum: "0",
      reviewNum: "0",
      ywWords: [],
      correctPercent: 0,
      errorPercent: 0,
      userInfo: {},
    };
  },
  onLoad(options) {
    this.chapterId = options.chapterId;
    this.type = options.type;
    this.userInfo = getStore({
      name: "userInfo",
    });
    this.getData();
  },
  methods: {
    getData() {
      getLtsIndex(this.chapterId).then((res) => {
        this.chapterData = res.data.chapter;
        this.correctNum = res.data.correctNum;
        this.errorNum = res.data.errorNum;
        this.reviewNum = res.data.reviewNum;
        this.ywWords = res.data.ywWords;
        if (this.reviewNum) {
          this.correctPercent = parseFloat(
            ((this.correctNum / this.reviewNum) * 100).toFixed(2)
          );
        }
        if (this.reviewNum) {
          this.errorPercent = parseFloat(
            ((this.errorNum / this.reviewNum) * 100).toFixed(2)
          );
        }
      });
    },
    switchPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./review2Info";
</style>
